<!--不受理案件弹窗-->

<template>
  <el-dialog append-to-body title="核实回访记录" width="640px" :visible="visible" @close="handleClose">
    <!--  :rules="rules.comment" -->
    <el-form ref="form" :model="form" class="white-card">
      <el-form-item label="" v-for="(item, index) in form.options" :key="index" :prop="'options.' + index + '.input'" :rules="item.isChecked ? [{ required: true, message: '请填写' }] : [{ required: false }]">
        <el-checkbox label="" v-model="item.isChecked" @change="checkValueChanged(item)">{{ item.title }}</el-checkbox>
        <el-input v-model="item.input" show-word-limit placeholder="请输入" type="textarea" style="width: 100%; height: 100px; margin-top: 10px"></el-input>
      </el-form-item>
    </el-form>
    <div class="split"></div>

    <div class="dialog-footer-btn">
      <el-button @click="handleClose" type="primary" plain>关闭</el-button>
      <el-button @click="handleSubmit" :loading="submitting" type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as mixins from "@/utils/mixins";
import * as dictApi from "@/api/dict";
import * as workOrderApi from "@/api/workOrder/index";
import * as templateApi from "@/api/template";
import { dict2Array } from "@/utils/common";
import { workOrderPublicIntentionDict } from "@/utils/dict";
import { finish } from "@/api/workOrder/distribute";
import { Message } from "element-ui";

export default {
  name: "checkBackDialog",
  mixins: [mixins.dialog, mixins.form],
  props: ["visible", "workOrderNo", "workOrderId"],
  data() {
    return {
      form: {
        options: [
          {
            id: "1",
            isChecked: true,
            title: "投诉人回访记录",
            input: "",
          },
          {
            id: "2",
            isChecked: false,
            title: "承办部门回访记录",
            input: "",
          },
          {
            id: "3",
            isChecked: false,
            title: "上级主管部门回访记录",
            input: "",
          },
        ],
      },
      rules: {
        comment: {},
      },
      publicStatusArr: dict2Array(workOrderPublicIntentionDict),

      submitting: false,
      showTest: "",
    };
  },
  created() {},
  methods: {
    checkValueChanged(val) {
      // this.rules.comment[val.id] = val.isChecked ? [{ required: true, message: "请填写" }] : [];
    },
    handleSubmit() {
      if (this.form.options.filter((e) => e.input).length === 0) {
        Message({
          message: "请输入回访记录",
          type: "error",
          duration: 3 * 1000,
        });
        return;
      }

      this.validateAndConfirm("form")
        .then((res) => {
          this.submitting = true;
          const args = {
            complainantRecord: this.form.options[0].input,
            orgRecord: this.form.options[1].input,
            orgRecord1: this.form.options[2].input,
            remark: this.getAllRemarks(),
          };
          return workOrderApi.finish.addCheckVisit({
            ...args,
            workOrderId: this.workOrderId,
            workOrderNo: this.workOrderNo,
          });
        })
        .then(() => {
          this.$emit("success");
          this.handleClose();
        })
        .finally(() => {
          this.submitting = false;
        });
    },
    getRemarkSpan(title, content) {
      return '<div><span style="font-weight: bold; color: #333; font-size: 14px">' + title + '：</span><span style="color: #999; font-size: 14px">' + content + "</span></div>";
    },
    getAllRemarks() {
      return this.form.options
        .filter((e) => e.input && e.isChecked)
        .map((e) => this.getRemarkSpan(e.title, e.input))
        .join("\n");
    },
  },
};
</script>

<style scoped></style>
